<template>
  <view class="template-protocol">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
        <text class='icon tn-icon-left'></text>
      </view>
    </tn-nav-bar>
    
    <view class="protocol-content" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view class="title tn-text-center">用户服务协议</view>
      
      <view class="section">
        <view class="section-title">一、年龄限制</view>
        <view class="section-content">
          <view class="item">1.1 您确认，您已年满18周岁或根据所在地区法律已达到成年年龄。</view>
          <view class="item">1.2 未满18周岁的用户禁止使用本应用的任何服务。</view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">二、服务内容</view>
        <view class="section-content">
          <view class="item">2.1 本应用提供智能成人用品相关的展示、购买、咨询等服务。</view>
          <view class="item">2.2 用户需遵守当地法律法规，不得将本应用用于任何非法用途。</view>
          <view class="item">2.3 本应用保留随时修改或中断服务的权利，无需事先通知用户。</view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">三、隐私保护</view>
        <view class="section-content">
          <view class="item">3.1 我们严格保护用户的个人信息和隐私数据。</view>
          <view class="item">3.2 用户的浏览记录、购买记录等信息将被严格保密。</view>
          <view class="item">3.3 我们采用业内标准的加密技术保护用户数据。</view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">四、用户行为规范</view>
        <view class="section-content">
          <view class="item">4.1 禁止发布任何违法、淫秽或不当内容。</view>
          <view class="item">4.2 禁止骚扰其他用户或损害其他用户权益。</view>
          <view class="item">4.3 禁止从事任何违反法律法规的活动。</view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">五、商品及服务</view>
        <view class="section-content">
          <view class="item">5.1 本应用提供的商品信息仅供参考，实际商品以收到实物为准。</view>
          <view class="item">5.2 用户应当谨慎选择，确认商品适合自己使用。</view>
          <view class="item">5.3 商品售后服务按照国家相关规定执行。</view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">六、免责声明</view>
        <view class="section-content">
          <view class="item">6.1 用户使用本应用所产生的风险由用户自行承担。</view>
          <view class="item">6.2 对于因不当使用产品造成的任何损害，本应用不承担责任。</view>
          <view class="item">6.3 本应用不对用户间产生的纠纷承担责任。</view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">七、协议修改</view>
        <view class="section-content">
          <view class="item">7.1 本应用保留修改本协议的权利。</view>
          <view class="item">7.2 协议修改后，将在应用内公示。</view>
          <view class="item">7.3 继续使用本应用则视为接受修改后的协议。</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Protocol',
  computed: {
    vuex_custom_bar_height() {
      return uni.getSystemInfoSync().statusBarHeight + 45
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.template-protocol {
  min-height: 100vh;
  background-color: #FFFFFF;
}

.protocol-content {
  padding: 30rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 50rpx;
  }
  
  .section {
    margin-bottom: 40rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      color: #333;
    }
    
    .section-content {
      .item {
        font-size: 28rpx;
        color: #666;
        line-height: 1.8;
        margin-bottom: 16rpx;
        text-align: justify;
      }
    }
  }
}

.tn-custom-nav-bar__back {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 30rpx;
  
  .icon {
    font-size: 46rpx;
    color: #000000;
    
    &:active {
      transform: scale(0.92);
    }
  }
}
</style>
